Javascript—new 關鍵字

2021-11-25 Thu

使用 new 的時候會發生四件事情

  • 建立一個空的簡單 JavaScript 物件（即{}）；
  • 為步驟 1 新建立的物件添加屬性proto，將該屬性鏈接至建構子函式的原型對象 ；
  • 將步驟 1 新建立的對像作為 this 的上下文 ；
  • 如果該函式沒有回傳物件，則回傳 this。

new MDN 運算子

函式建構子、new 關鍵字

函式建構子是用來新建物件的一種函式 當函式建構子與 new 運算子一起使用的時候，能夠建立出新物件。

函式建構子可以設定物件的屬性與方法(用 Java 語言描述就是建構子的概念)

以下面的範例為例

function Motorcycle(brand , model, year) {
  this.brand  = brand ; //constructor 建構子
  this.model = model;
  this.year = year;
}
const motorcycle1 = new Motorcycle('Sym', 'Jet S',2008);
console.log(motorcycle1);

這邊就會仿造像是 Java 的 class(類別)的寫法，當使用 new 關鍵字的時候，this 指向的是被 new 出來實體我們藉由帶入 arg 引數的方式做為實體的各種屬性，利入誰的車，什麼廠牌，幾年份。

函式建構子沒有和 new 一起使用

如果函式建構子沒有和 new 一起使用就會當成一般的函式呼叫，下面的範例會印出 undefiled，因為 Motorcycle 沒有 return 任何東西。

function Motorcycle(brand , model, year) {
  this.brand  = brand ; //constructor 建構子
  this.model = model;
  this.year = year;
}
const car1 = Motorcycle('Sym', 'Jet S',2008);
console.log(car1); //underfiled

函式建構子與 new 一起使用，但 return 一個參數

function Motorcycle(brand , model, year) {
  this.brand  = brand ; //constructor 建構子
  this.model = model;
  this.year = year;
    return "x"
}

const car1 = new Motorcycle('Sym', 'Jet S',2008);
console.log(car1);

結果還是回傳你所建立的摩托車實體如下圖

函式建構子與 new 一起使用，但 return 一個函式

function Person(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;//constructor建構子，建立物件時所需要帶入的屬性
    return function() {
      console.log(x);
    }
}

var john = new Person("John", "Doe");
console.log(john);//回傳function() {console.log(x);} 這個函式

如下圖

函式建構子與 new 一起使用，但 return 一個物件

function Person(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;//constructor建構子，建立物件時所需要帶入的屬性
    return {firstname:"Danny",lastname:"Chen"}
}

var john = new Person("John", "Doe");
console.log(john);//Danny這個物件

函式

所有函式都有 prototype 的屬性

可以參見底下，這時候 console.dir(hello)才獨有的

function hello() {

}
var obj = {};
var arr = [];
console.dir(hello);
console.dir(obj);
console.dir(arr);

打開 hello 的內容可以看到有一個 prototype 屬性，除非你使用 new 關鍵字，不然這個屬性平常就沒什麼太大作用。

與__proto__不同的地方是這個prototype 屬性並不是函式的原型，而是用來創造物件的原型

換句話說創造物件的原型可以使用函式建構子的 prototype 屬性。

copyright